import React, { useState, useMemo } from "react";
import VirtualList from "rc-virtual-list";
import { Button, Input, Card, Divider, Typography } from "antd";
import "@/tailwind-variables.less";

const { Title, Text } = Typography;

interface ListItem {
  id: number;
  name: string;
  description: string;
  avatar: string;
  status: "online" | "offline" | "busy";
}

export const RCVitualList = () => {
  const [searchText, setSearchText] = useState("");
  const [itemHeight, setItemHeight] = useState(80);

  // 生成大量模拟数据
  const generateData = (count: number): ListItem[] => {
    return Array.from({ length: count }, (_, index) => ({
      id: index + 1,
      name: `用户 ${index + 1}`,
      description: `这是第 ${
        index + 1
      } 个用户的描述信息，包含一些详细的内容...`,
      avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${index}`,
      status: ["online", "offline", "busy"][Math.floor(Math.random() * 3)] as
        | "online"
        | "offline"
        | "busy",
    }));
  };

  const allData = useMemo(() => generateData(10000), []);

  // 过滤数据
  const filteredData = useMemo(() => {
    if (!searchText) return allData;
    return allData.filter(
      (item) =>
        item.name.toLowerCase().includes(searchText.toLowerCase()) ||
        item.description.toLowerCase().includes(searchText.toLowerCase())
    );
  }, [allData, searchText]);

  const getStatusColor = (status: string) => {
    switch (status) {
      case "online":
        return "#52c41a";
      case "busy":
        return "#faad14";
      case "offline":
        return "#d9d9d9";
      default:
        return "#d9d9d9";
    }
  };

  const renderItem = (item: ListItem) => (
    <div
      key={item.id}
      style={{
        height: itemHeight,
        padding: "12px 16px",
        borderBottom: "1px solid #f0f0f0",
        display: "flex",
        alignItems: "center",
        gap: "12px",
      }}
    >
      <div style={{ position: "relative" }}>
        <img
          src={item.avatar}
          alt={item.name}
          style={{
            width: 40,
            height: 40,
            borderRadius: "50%",
            border: "2px solid #f0f0f0",
          }}
        />
        <div
          style={{
            position: "absolute",
            bottom: 0,
            right: 0,
            width: 12,
            height: 12,
            borderRadius: "50%",
            backgroundColor: getStatusColor(item.status),
            border: "2px solid white",
          }}
        />
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontWeight: 500, marginBottom: 4 }}>{item.name}</div>
        <div style={{ color: "#666", fontSize: "12px" }}>
          {item.description}
        </div>
      </div>
      <div style={{ textAlign: "right" }}>
        <div
          style={{
            fontSize: "12px",
            color: getStatusColor(item.status),
            textTransform: "capitalize",
          }}
        >
          {item.status}
        </div>
      </div>
    </div>
  );

  return (
    <div
      className="flex flex-col gap-4"
      style={{ padding: "20px", maxWidth: "800px", margin: "0 auto" }}
    >
      <Title level={2}>RC Virtual List 虚拟列表示例</Title>

      <Card>
        <div style={{ marginBottom: "16px" }}>
          <Text>
            此示例展示了使用 <code>rc-virtual-list</code> 渲染{" "}
            {allData.length.toLocaleString()} 条数据，
            只渲染可见区域的DOM元素，大大提升性能。
          </Text>
        </div>

        <div
          style={{
            display: "flex",
            gap: "12px",
            marginBottom: "16px",
            alignItems: "center",
          }}
        >
          <Input
            placeholder="搜索用户名或描述..."
            value={searchText}
            onChange={(e) => setSearchText(e.target.value)}
            style={{ flex: 1 }}
            allowClear
          />
          <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
            <Text>行高:</Text>
            <Button
              size="small"
              onClick={() => setItemHeight(60)}
              type={itemHeight === 60 ? "primary" : "default"}
            >
              小
            </Button>
            <Button
              size="small"
              onClick={() => setItemHeight(80)}
              type={itemHeight === 80 ? "primary" : "default"}
            >
              中
            </Button>
            <Button
              size="small"
              onClick={() => setItemHeight(100)}
              type={itemHeight === 100 ? "primary" : "default"}
            >
              大
            </Button>
          </div>
        </div>

        <Divider />

        <div
          style={{
            marginBottom: "12px",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <Text strong>显示 {filteredData.length.toLocaleString()} 条记录</Text>
          <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
            <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
              <div
                style={{
                  width: 8,
                  height: 8,
                  borderRadius: "50%",
                  backgroundColor: "#52c41a",
                }}
              />
              <Text style={{ fontSize: "12px" }}>在线</Text>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
              <div
                style={{
                  width: 8,
                  height: 8,
                  borderRadius: "50%",
                  backgroundColor: "#faad14",
                }}
              />
              <Text style={{ fontSize: "12px" }}>忙碌</Text>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
              <div
                style={{
                  width: 8,
                  height: 8,
                  borderRadius: "50%",
                  backgroundColor: "#d9d9d9",
                }}
              />
              <Text style={{ fontSize: "12px" }}>离线</Text>
            </div>
          </div>
        </div>

        <VirtualList
          data={filteredData}
          height={400}
          itemHeight={itemHeight}
          itemKey="id"
          style={{
            border: "1px solid #f0f0f0",
            borderRadius: "6px",
          }}
        >
          {renderItem}
        </VirtualList>
      </Card>

      <Card title="性能说明" size="small">
        <ul style={{ margin: 0, paddingLeft: "20px" }}>
          <li>虚拟列表只渲染可见区域的 DOM 元素</li>
          <li>支持大量数据渲染而不影响性能</li>
          <li>支持动态搜索和过滤</li>
          <li>支持动态调整行高</li>
          <li>滚动时自动回收和复用 DOM 节点</li>
        </ul>
      </Card>
    </div>
  );
};
